// 封装成vue的插件
import GeekIcon from './geek-icon.vue'

// 高亮插件
import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'

// dayjs 核心模块
import dayjs from 'dayjs'
// dayjs 计算相对时间的模块
import relativeTime from 'dayjs/plugin/relativeTime'
// 导入语言包
import 'dayjs/locale/zh-cn'
// 把relativeTime模块的api扩展到dayjs上
dayjs.extend(relativeTime)
// 使用语言包
dayjs.locale('zh-cn')

export default {
  install (Vue) {
    // Vue就是构造函数，注册全局组件，指令，过滤器，原型属性
    // 扩展vue原来有的功能，认为是vue插件
    // 当Vue.use()的时候，就会执行install函数，默认传人Vue构造函数
    Vue.component(GeekIcon.name, GeekIcon)

    // 过滤器
    Vue.filter('relativeTime', (value) => {
      // 把value转换成相对时间
      // 使用dayjs来转换相对时间
      // dayjs(value) 时间对象，toNow() 和现在的时间进行比较，得到一个相对时间
      return dayjs(value).toNow()
    })

    // 自定义指令
    Vue.directive('highlight', (el) => {
      // console.log('元素渲染完毕', el) el 就是 .html 容器放文章内容
      // 找到容器下所有的code标签，进行遍历，使用hljs的函数完成代码高亮
      el.querySelectorAll('pre code').forEach(dom => {
        hljs.highlightElement(dom)
      })
    })
  }
}
